import React, { Component } from "react";
import { Card, Input, Button, Form, message } from "antd";
import { useNavigate } from "react-router-dom";

import { getUserMsg } from "@/store/modules/user";
import { useDispatch } from "react-redux";
import "./index.scss";

export default function Login() {
  let nav = useNavigate();
  let dispatch = useDispatch();
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const [form] = Form.useForm();

  let onFinish = async (value) => {
    await dispatch(getUserMsg(value));
    nav("/");
    message.success("登录成功");
  };

  return (
    <>
      <div className="login">
        <Card>
          <div className="wrap">
            <h1>极客园</h1>
            <Form
              {...layout}
              validateTrigger="onBlur"
              name="control-hooks"
              labelAlign="center"
              onFinish={onFinish}
              initialValues={{ code: "246810", mobile: "15555555555" }}
            >
              <Form.Item
                name="mobile"
                label="手机号"
                rules={[
                  { required: true, message: "请输入手机号" },
                  { pattern: /^1\d{10}/, message: "请输入正确的手机号" },
                ]}
              >
                <Input placeholder="请输入手机号"></Input>
              </Form.Item>
              <Form.Item
                name="code"
                label="验证码"
                rules={[{ required: true, message: "请输入验证码" }]}
              >
                <Input placeholder="请输入验证码"></Input>
              </Form.Item>
              <Form.Item {...tailLayout}>
                <Button htmlType="submit" type="primary">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </Card>
      </div>
    </>
  );
}
